<template>
    <PageView>
        <a-card title="列表">
            <a-button-group slot="extra">
                <a-button type="primary" @click="changeStatus(`1`,`通过`)">通过</a-button>
                <a-button type="primary" @click="changeStatus(`2`,`驳回`)">驳回</a-button>
            </a-button-group>
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.username " placeholder="账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.type" style="width:100%" placeholder="类型" @change="getListTwo">
                        <a-select-option value="1">朋友圈截图</a-select-option>
                        <a-select-option value="2">微信群截图</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.status" style="width:100%" placeholder="状态" @change="getListTwo">
                        <a-select-option value="-1">被驳回</a-select-option>
                        <a-select-option value="1">未审核</a-select-option>
                        <a-select-option value="2">已通过</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,getCheckboxProps}"
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Turntable from '../../api/Turntable'
    export default {
        name: 'imgPan',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '账号',
                        dataIndex: 'username',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '上传截图',
                        dataIndex: 'image',
                        customRender: (v) => <img style="display:block;height:40px;cursor:pointer;" src={v} onClick={()=>this.showImage(v)}/>
                    },
                    {
                        title: '类型',
                        dataIndex: 'type',
                        customRender: (v) => {
                            let status = {
                                "1": { name: '朋友圈截图', color: 'warning' },
                                "2": { name: '微信群截图', color: 'error' },
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        customRender: (v) => {
                            let status = {
                                "-1": { name: '被驳回', color: 'error' },
                                "1": { name: '未审核', color: 'warning' },
                                "2": { name: '已通过', color: 'success' },
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '上传时间',
                        dataIndex: 'add_time',
                        customRender: (v) => v?this.timeOne(v):"暂无"
                    },
                ],
                selectedRowKeys:[],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                searchData: {
                    username: '',
                    status:undefined,
                    type:undefined,
                },
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getListTwo () {
                this.current = 1
                this.getList()
            },
            getList () {
                this.loading = true
                Turntable.friendImageList({
                    page: this.current,
                    num: this.pageSize,
                    ...this.searchData,
                }).then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            getCheckboxProps(v){
                return{
                    props: {
                        disabled: v.status !== '1', // Column configuration not to be checked
                    },
                }
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            changeStatus(type,title){
                if(this.selectedRowKeys.length===0){
                    this.$notification.warning({
                        message: '提示',
                        description:"请先选择"
                    })
                    return
                }
                this.$confirm({
                    title: `${title}`,
                    content: `确定要${title}所选截图吗?`,
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Turntable.adoptFriden({ id:this.selectedRowKeys.map(v=>this.data[v].id).join(","),type }).then(res => {
                                resolve()
                                this.selectedRowKeys = []
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            showImage(v){
                this.$info({
                    title: `截图`,
                    width:500,
                    content: (
                        <img src={v} style="width:calc(100% - 38px);margin-top:20px"/>
                    ),
                    centered: true,
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>